$(function () {
  class Mart {
    constructor() {
      this.list_first_01 = $('.hk .big-banner-con1 .con1')
      this.list_first_02 = $('.hk .big-banner-con1 .con2')
      this.data = {}
      this.list = $('.hk .list')
      this.getdatas_first();
      this.getDatas();
      this.bindEvent()
    }

    //获取第一个li的数据
    getdatas_first() {
      let options = {
        url: '../../static/data/recommand3.json'
      }
      axios(options).then(res => {

        this.data1 = res.data[201709146].data;
        
        this.render_first(this.data1)
        const observer = lozad();
        observer.observe();
      })
    }

    render_first(data) {
      $(this.list_first_01).html(`
      <img class='lozad' data-src="${data[0].imgUrl}" alt="">
      <div class="msg">
        <section>${data[0].lefttitle}</section>
        <p>
          <span>${data[0].righttitle}</span>
          <span>${data[0].righttitle1}</span>
        </p>
      </div>
      `)
      $(this.list_first_02).html(`
      <img src="${data[1].imgUrl}" alt="">
      <div class="msg">
        <section>${data[1].lefttitle}</section>
        <p>
          <span>${data[1].righttitle}</span>
          <span>${data[1].righttitle1}</span>
        </p>
      </div>
      `)

    }

    //获取其余的数据
    getDatas() {
      let options = {
        url: '../../static/data/index/tmall_hk.json'
      }
      axios(options).then(res => {
        this.datas = res.data
        this.render(this.datas)
        const observer = lozad();
        observer.observe();
      })
    }
    render(data) {
      for(let i=0;i<data.length;i++){
        this.list.append(`<li class="goods">
          <img class='lozad' data-src='${data[i].src}'>
          <div class='title'>${data[i].title}</div>
          <div class='price'>${data[i].price}</div>
        </li>`)
      }
    }
    bindEvent() {
      this.list.on('click', '.goods', (e) => {
        console.log(e.target.parentNode);
        let ms = $(e.target).parents('.hk .list .goods')
        console.log(ms);
        this.data.src = $(ms).find('.lozad').attr('src')
        this.data.title = $(ms).find('.title').html()
        this.data.price = $(ms).find('.price').html()
        location.href = '../../dist/goods-details.html#id=' + encodeURI(JSON.stringify(this.data))
      })
    }
  }
  new Mart();
})